<script lang="ts">
import { h } from "vue";
import students from "../day20241211/students.vue";
export default {
    name:'daystus',
    setup(){
        const renderContent=()=>{
            return h('div',{id:'wrap'},[
                h('h1','组合式API-自定义渲染-返回函数'),
                h('p','通过vue的h函数自定义渲染'),
                h('p','This content is rendered using a render function in setup()'),
                h('button',{onClick:()=>alert('Button click')},'点我'),
                h(students)
            ])
        }
        return{
            renderContent,
        }
    },
    render(){
        return this.renderContent()
    },
}
</script>
<style>
#wrap{
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    button{
        margin-top: 10px;
        padding: 10px 20px;
        background-color: #61dafb;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    button:hover{
        background-color: #21a1f1;
    }
}
</style>
